<template>
  <div class="notice">
    <el-dialog
      :title="messageTitle + '消息发送'"
      :visible.sync="visible"
      :before-close="doCancel"
      width="800px"
    >
      <div class="main">
        <el-col :span="16" class="-content">
          <el-form :model="notice">
            <el-form-item label="消息前部">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="notice.first"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="消息类型">
              <el-input v-model="notice.optName" readonly></el-input>
            </el-form-item>
            <el-form-item label="消息尾部">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="notice.remarks"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSend">发送</el-button>
              <el-button @click="doCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7" class="-template">
          <div class="-title">消息样例</div>
          <div class="-content">
            <div>
              {{
                notice.first ||
                  "您报名的XX活动将在明天9点开始，请合理安排出行时间！"
              }}
            </div>
            <div>
              <span>消息类型：</span><span>{{ notice.optName }}</span>
            </div>
            <div>
              <span>跟进时间：</span><span>{{ formatDate }}</span>
            </div>
            <div>{{ notice.remarks }}</div>
          </div>
        </el-col>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NoticeApi from "@/api/admin/notice";
import Editor from "../editor/editor";

export default {
  name: "notice",
  components: { Editor },
  data() {
    return {
      notice: {
        first: "",
        type: "",
        optName: "",
        remarks: "点击查看详情！",
        ids: ""
      }
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    ids: {
      type: String,
      default: []
    },
    opt: {
      type: Object,
      default: {}
    }
  },
  computed: {
    messageTitle: function() {
      this.notice.optName = this.opt.name;
      this.notice.opt = this.opt.opt;
      this.notice.ids = this.ids;
      return this.notice.optName;
    },
    formatDate: function() {
      var date = new Date();
      return (
        date.getFullYear() +
        "年" +
        Number(date.getMonth() + 1) +
        "月" +
        date.getDay() +
        "日" +
        date.getHours() +
        ":" +
        date.getMinutes()
      );
    }
  },
  methods: {
    doSend: function() {
      if (!(this.notice.first && this.notice.remarks && this.notice.optName)) {
        this.$message.warning("请完整填写消息！");
        return;
      }
      NoticeApi.sendActivity(this.notice.ids, this.notice).then(() => {
        this.$emit("update:finish", true);
      });
    },
    doCancel: function() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@require "../../common/stylus/variable.styl"
.notice {
  .main{
    overflow :hidden;
    .-content{
      border: solid 1px #ddd;
      padding:5px;
    }
    .-template{
      margin-left:20px;
      padding:5px;
      border: solid 1px #ddd;
      .-title{
        margin-bottom: 10px
        text-align : center;
        background-color: #ddd;
        font-size 18px;
      }
      .-content{
        line-height:26px;
      }
    }
  }
}
</style>
